<template>
    <el-dialog v-model="importShow" :title="uploadData.title" :before-close="handleClose">
        <div v-if="uploadData.info" class="fxn-info fxn-margin-b-20">{{uploadData.info}}</div>
        <el-form :model="importForm" ref="importRef" :rules="importRules" label-width="120px">
            <el-form-item label="模板文件">
                <el-button type="primary" plain @click="handleDown">下载模板</el-button>
            </el-form-item>
            <el-form-item label="文件上传" prop="files">
                <UpFiles v-model:fileList="importForm.files" :size="uploadData.size" :accept="uploadData.accept" :limit="uploadData.limit"></UpFiles>
            </el-form-item>
        </el-form>
        
        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" :loading="btnLoading" @click="handleSubmit">确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed, defineEmits } from 'vue'
    import UpFiles from './UpFiles.vue'
    export default defineComponent({
        components: {
            UpFiles,
        },
        props: {
            importShow: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            uploadData: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        emits: ['update:importShow','handleImport'],
        setup(props) {
            const { proxy } = getCurrentInstance();

            //初始化数据
            const state = reactive({
                importShow: computed({
                    get: ()=>{
                        return props.importShow
                    },
                    set: ()=>{
                        return props.importShow
                    }
                }),

                //Form
                btnLoading: false,
                importRef: '',
                importForm: {
                    files: [],
                    file: '',
                },
                importRules: {
                    files: [
                        { required: true, message: '请上传文件', trigger: 'blur' },
                    ]
                },
            })

            //下载模板文件
            const handleDown = () => {
                window.open(proxy.PathUrl + props.uploadData.downUrl);
            }

            //提交
            const handleSubmit = () => {
                state.importRef.validate((valid) => {
                    if(valid){
                        for(let key in state.importForm.files){
                            state.importForm.file = state.importForm.files[key].name;
                            state.importForm.files = [];
                        }
                        state.btnLoading = true;
                        proxy.$emit('handleImport', state.importForm.file);
                        state.btnLoading = false;
                    }
                })
            }

            //关闭窗口
            const handleClose = () =>{
                proxy.$emit('update:importShow', false);
                proxy.$refs.importRef.resetFields();
            }
            
            //Dom加载
            onMounted(()=>{
                
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handleDown,
                handleSubmit,
                handleClose,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
   
</style>